<template>
   <!-- 文章回复列表 -->
   <div class="comment_reply">
      <van-nav-bar
         :title="
            comment.reply_count > 0
               ? `${comment.reply_count}条回复`
               : '暂无回复'
         "
      >
         <van-icon
            slot="left"
            name="cross"
            @click="$emit('close')"
         />
      </van-nav-bar>
      <div class="scroll_wrap">
         <!-- 当前评论项 -->
         <CommentItem :comment="comment"></CommentItem>
         <!-- 评论的回复列表 -->
         <van-cell title="全部回复"></van-cell>
         <CommentList
            :source="comment.com_id"
            type="c"
            :list="commentList"
         ></CommentList>
      </div>
      <!-- 发布评论 -->
      <div class="post_wrap">
         <van-button
            size="small"
            round
            class="post_btn"
            @click="isPostShow = true"
            >写评论</van-button
         >
      </div>
      <van-popup v-model="isPostShow" position="bottom">
         <CommentPost
            :target="comment.com_id"
            @post-success="onPostSuccess"
         ></CommentPost>
      </van-popup>
   </div>
</template>

<script>
import CommentItem from './comment-item.vue'
import CommentList from './coment-list.vue'
import CommentPost from './comment-post.vue'
export default {
   data() {
      return {
         // 发布评论弹框
         isPostShow: false,
         // 评论的回复列表
         commentList: []
      }
   },
   props: {
      comment: {
         type: Object,
         required: true
      }
   },
   components: {
      CommentItem,
      CommentList,
      CommentPost
   },
   methods: {
      onPostSuccess(data) {
         // console.log(this.comment)
         // console.log(data)
         // 更新回复的数量
         this.comment.reply_count++
         // 关闭弹层
         this.isPostShow = false
         // 将最新回复内容展示到列表的顶部
         this.commentList.unshift(data.new_obj)
      }
   }
}
</script>

<style lang="less" scoped>
.scroll_wrap {
   position: fixed;
   top: 92px;
   left: 0;
   right: 0;
   bottom: 88px;
   overflow-y: auto;
}
.post_wrap {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 88px;
   display: flex;
   align-content: center;
   justify-content: center;
   background-color: #fff;
   border-top: 1px solid #d8d8d8;
   .post_btn {
      width: 60%;
   }
}
</style>
